
import React, { Component } from 'react';
import Son from './Son';

export default class RefDemo extends Component {

    constructor(props){
      super(props);  
      this.text02 = null;
      this.text03Ref = React.createRef();//相当于vue3组合式api中的 ref();

      this.son02 = null;
      this.son03Ref = React.createRef();
    }

    componentDidMount(){
      this.refs.sonRef01.getParent(this);
    }

    getText01=()=>{
        // this.refs.text01// 这是文本框的dom对象。
        this.refs.text01.value="文本框的值被修改了";

    }

    getText02=()=>{
        this.text02.value="文本框的值被修改了";
    }

    getText03=()=>{
        // this.text03Ref.current;//这是dom对象。
        this.text03Ref.current.value="文本框的值被修改了";
    }

    getSon01=()=>{
        // console.log("this.refs.sonRef01",this.refs.sonRef01);
        this.refs.sonRef01.fn01("hello，我是父亲");
    }

    getSon02=()=>{
        this.son02.fn01("hello，我是儿子");
    }

    getSon03=()=>{
        this.son03Ref.current.fn01("hello，我是儿子");
    }

    sonToParent=(data)=>{
      console.log("父组件的data",data);
    }

  render() {
    return (
      <div>
        <h1>ref的示例：</h1>
        {/* 一、官方标签使用ref */}
        {/* 1、给ref赋值为字符串 */}
        <input type="text" value="文本框" ref="text01" />
        <input type="button" value="获取文本框01" onClick={this.getText01} />
        {/* 2、给ref赋值为回调函数 */}
        <input type="text" value="文本框" ref={(el)=>{this.text02 = el}} />
        <input type="button" value="获取文本框02" onClick={this.getText02} />
        {/* 3、给ref赋值为React.createRef()的返回值 */}
        <input type="text" value="文本框" ref={this.text03Ref} />
        <input type="button" value="获取文本框03" onClick={this.getText03} />

        
        {/* 二、自定义组件使用ref */}
        {/* 1、给ref赋值为字符串 */}
        <Son ref="sonRef01"></Son>
        <input type="button" value="获取自定义组件01" onClick={this.getSon01} />
        {/* 2、给ref赋值为回调函数 */}
        <Son ref={el=>this.son02=el}></Son>
        <input type="button" value="获取自定义组件02" onClick={this.getSon02} />
        {/* 3、给ref赋值为React.createRef()的返回值 */}
        <Son ref={this.son03Ref} ></Son>
        <input type="button" value="获取自定义组件03" onClick={this.getSon03} />

        


      </div>
    )
  }
}
